zizhujianzhan_web/pages/[dir]/index.html.vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <!-- 内容 -->
    <div v-for="(item,index) in templateData" :key="index">
        <!--1.频道菜单-->
        <div v-if="item.sectorName=='channelMenu'">
            <templateChannelMenu :skinId="skinId" :routeId="routeId" :navigateData="navigateData.data" :templateData="item.componentList"></templateChannelMenu>
        </div>
        <!--2.广告组件-->
        <div v-if="item.sectorName=='adSector'">
            <templateAd :skinId="skinId" :adData="adData" :adTag="item.ad.ad_tag" ></templateAd>
        </div>
        <!--3.滚动图文组合-->
        <div v-if="item.sectorName=='scrollTextSector'">
            <templateScrollList :skinId="skinId" :templateData="item.componentList"></templateScrollList>
        </div>
        <!--4.图文组合1-->
        <div v-if="item.sectorName=='manyPictureSector'">
            <templateNewSector1 :skinId="skinId" :templateData="item.componentList"></templateNewSector1>
        </div>
        <!--5.图文组合2-->
        <div v-if="item.sectorName=='commentSector'">
            <templateNewSector2 :skinId="skinId" :templateData="item.componentList"></templateNewSector2>
        </div>
        <!--6.图文组合3-->
        <div v-if="item.sectorName=='listSector'">
            <templateNewSector3 :skinId="skinId" :templateData="item.componentList"></templateNewSector3>
        </div>
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup lang="ts">
//0.加载全局模板组件 start---------------------------------------->
//0.1全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//0.2局部通栏
//0.2.1广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 频道菜单
import templateChannelMenu from '@/components/template/sector/body/class/menu/1200x100/1.vue'
//0.2.3 滚动图文组合
import templateScrollList from '@/components/template/sector/body/class/banner/1200x410/1.vue'
//0.2.3 图文组合1
import templateNewSector1 from '@/components/template/sector/body/index/list/1200x470/1.vue'
//0.2.4 图文组合2
import templateNewSector2 from '@/components/template/sector/body/index/list/1200x470/2.vue'
//0.2.5 图文组合3
import templateNewSector3 from '@/components/template/sector/body/index/list/1200x980/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
//1.2使用url查询导航池id
const targetSegment = getRoutePath(1);
const routeId = ref<number>(0);
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId.value = getRouteId.data.category_id
}
//1.4获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore:any = useTemplateBaseStore()
//1.5获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref<number>(0)
const websiteId = ref<number>(0)
//1.6获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //1.6.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    websiteId.value = responseStatus.data.website_head.id;//获得网站id
    //1.6.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
}
//1.7.seo
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': routeId.value
    },
});
let seoTitle = setData.data.seo_title;
let seoDescription = setData.data.seo_description;
let seoKeywords = setData.data.seo_keywords;
let seoSuffix = setData.data.suffix;
let seoName = setData.data.website_name;
useHead({
    title: seoTitle + "_" + seoSuffix,
    meta: [
        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
        { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
    ]
});
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.1预创建请求数据
const templateGetData:any = [
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0},
    {"parent":routeId.value+",0,0","child":"","imgnum":0,"textnum":0}
]
//2.2获得模板数据
const response:any = await requestDataPromise('/client/indexData', {
    method: 'POST',
    body: {
        'website_id':websiteId.value,
        'getpage':'class'
    },
});
const templateData = response.data.template.class;
//console.log(templateData)
//2.2.1循环一下模板数据，把所有需要请求后端内容的组件里面imgSize和textSize拿出来
const getIndex = ref<number>(0);
for(let item of templateData){
    if(item.sectorName == 'scrollTextSector'||item.sectorName == 'manyPictureSector'||item.sectorName == 'commentSector'||item.sectorName == 'listSector'){
        for(let i of item.componentList){
            templateGetData[getIndex.value].imgnum = i.componentData.imgSize;
            templateGetData[getIndex.value].textnum = i.componentData.textSize;
            getIndex.value++;
        }
    }
}
//2.3 获得导航数据
const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
    method: 'GET',
    query: {
        'placeid': 1,
        'pid': routeId.value,
        'num': 8
    },
});
const getNavIndex = ref<number>(0);
for(let item of navigateData.data){
    templateGetData[getNavIndex.value].child = item.category_id;
    getNavIndex.value++;
}
//获得完整的请求数据
const jsonString = JSON.stringify(getTransformArray(templateGetData));
//2.4获得页面完整的请求数据
const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
    method: 'GET',
    query: {
        'id': jsonString
    },
});
if (mkdata.code == 200) {
    //获得所有子频道的内容
    let childData = ref<any>([]);
    for(let item of mkdata.data){
        childData.value.push(item.child)
    }
    let dataSort = ref<number>(0);
    const childDataLength = childData.value.length;
    //如果当前循环的这个组件数据长度已经超过了所有子频道的总数居量，则从0开始循环
    //此操作是为了防止B端创建的组件数超过了后台的导航数量
    for(let item of templateData){
        if(item.sectorName == 'scrollTextSector'){
            item.componentList[0].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
        }
        if(item.sectorName == 'manyPictureSector'){
            item.componentList[0].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
            item.componentList[1].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
        }
        if(item.sectorName == 'commentSector'){
            item.componentList[0].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
            item.componentList[1].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
        }
        if(item.sectorName == 'listSector'){
            item.componentList[0].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
            item.componentList[1].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
            item.componentList[2].componentData.data = childData.value[dataSort.value % childDataLength];
            dataSort.value++;
        }
    }
    //console.log(templateData)
}
//2.5广告数据
const adData:any = ref([]);
adData.value.push(response.data.ad.top)
for(let item of response.data.ad.class){
    adData.value.push(item)
}
templateBaseStore.setAdList(adData.value)
//2.页面数据 end---------------------------------------->
</script>

<style lang="less" scoped>
@import '@/assets/css/class.less';
</style>